<template>
  <div>
    <div class="app-container">
      <!-- 搜索栏 -->
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="陪诊师姓名" prop="attendantName">
          <el-input
            v-model="queryParams.attendantName"
            clearable
            placeholder="请输入陪诊师姓名"
            style="width: 240px"
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="提现状态" prop="status">
          <el-select
            v-model="queryParams.status"
            clearable
            placeholder="请选择提现状态"
            style="width: 240px"
            @change="handleQuery"
          >
            <el-option label="提现中" :value="0" />
            <el-option label="提现成功" :value="1" />
            <el-option label="提现失败" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="提现时间" prop="dateRange" style="width: 308px">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 工具栏（只保留列显隐/搜索开关） -->
      <el-row :gutter="10" class="mb8">
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
      </el-row>

      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="list">
        <el-table-column label="提现人" align="center" v-if="columns.withdrawer.visible">
          <template #default="scope">
            <div style="display: flex; align-items: center; justify-content: center; gap: 8px;">
              <el-avatar :size="40" :src="scope.row.attendantAvatar" style="flex-shrink: 0;" />
              <span class="user-name">{{ scope.row.attendantName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="提现金额" align="center" prop="amount"  v-if="columns.amount.visible">
          <template #default="scope">
            <span style="color: #7CBF50;">¥{{ centsToYuan(scope.row.amount) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手续费" align="center" prop="withdrawFee"  v-if="columns.withdrawFee.visible">
          <template #default="scope">
            <span style="color: #7CBF50;">¥{{ centsToYuan(scope.row.withdrawFee) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提现状态" align="center" prop="status" v-if="columns.status.visible">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="结果说明" align="center" prop="result" show-overflow-tooltip v-if="columns.result.visible" >
          <template #default="scope">
            <span>{{ scope.row.result || '--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="提现时间" align="center" prop="createTime" v-if="columns.createTime.visible" />
        <el-table-column label="操作" align="center" width="180">
          <template #default="scope">
            <el-button v-if="scope.row.status == 0" link type="warning" size="medium" icon="Finished" @click="handleWithdraw(scope.row)">待处理</el-button>
            <el-text v-else link type="success" size="medium">已处理</el-text>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 审核对话框 -->
    <ApplicationReviewDialog 
      :reviewDialogVisible="reviewDialogVisible"
      :withdrawId="currentWithdrawId"
      @handleClose="handleWithdrawClose"
      @success="onWithdrawSuccess"
    />
  </div>
</template>

<script setup name="Withdraw">
import { onMounted } from 'vue'
import { listWithdraw } from '@/api/withdraw/withdraw'
import { centsToYuan } from '@/utils/money'
import ApplicationReviewDialog from './components/ApplicationReviewDialog.vue'

const { proxy } = getCurrentInstance();

const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)
const dateRange = ref([])
const list = ref([])
const reviewDialogVisible = ref(false)
const currentWithdrawId = ref(null)

// 列显隐控制
const columns = ref({
  withdrawer: { label: '提现人', visible: true },
  amount: { label: '提现金额', visible: true },
  withdrawFee: { label: '手续费', visible: true },
  status: { label: '状态', visible: true },
  result: { label: '结果说明', visible: true },
  createTime: { label: '创建时间', visible: true }
})

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    attendantName: null,
    status: null,
    startTime: null,
    endTime: null
  }
})
const { queryParams } = toRefs(data)

function handleWithdrawClose() {
  reviewDialogVisible.value = false
  currentWithdrawId.value = null
}

function onWithdrawSuccess() {
  proxy.$modal.msgSuccess('提现处理成功')
  getList()
}

function handleWithdraw(row) {
  currentWithdrawId.value = row.id
  reviewDialogVisible.value = true
}

// 状态映射
const getStatusText = (status) => {
  const statusMap = {
    0: '提现中',
    1: '提现成功',
    2: '提现失败'
  }
  return statusMap[status] || '--';
}
const getStatusTagType = (status) => {
  const statusMap = {
    0: 'warning',
    1: 'success',
    2: 'danger'
  }
  return statusMap[status] || 'info';
} 

function buildDateRange() {
  if (dateRange.value && dateRange.value.length === 2) {
    queryParams.value.startTime = dateRange.value[0] + ' 00:00:00'
    queryParams.value.endTime = dateRange.value[1] + ' 23:59:59'
  } else {
    queryParams.value.startTime = null
    queryParams.value.endTime = null
  }
}

function getList() {
  loading.value = true
  buildDateRange()
  listWithdraw(queryParams.value).then(res => {
    list.value = res.rows
    total.value = res.total
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  dateRange.value = []
  proxy.resetForm('queryRef')
  handleQuery()
}

onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.user-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
